<!--学员评教结果报告单-->
<template>
  <div class="wrapper-container">
    <div class="table-container">
      <el-row class="item-row2 item-row">
        <el-col class="name-col" :span="24">
          信息工程大学洛阳校区学员评教结果报告单
        </el-col>
      </el-row>
      <el-form ref="form" style="margin-top: 15px" class="my-form">
        <el-row class="single-row">
          <el-col :span="8">
            <el-row class="item-row">
              <el-col class="name-col" :span="12"> 学期 </el-col>
              <el-col class="content-col" :span="12">
                {{ baseInfo.xq }}
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row class="item-row">
              <el-col class="name-col" :span="12"> 系 </el-col>
              <el-col class="content-col" :span="12">
                {{ baseInfo.system }}
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row class="item-row">
              <el-col class="name-col" :span="12"> 教研室 </el-col>
              <el-col class="content-col" :span="12">
                {{ baseInfo.room1 }}
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="single-row">
          <el-col :span="8">
            <el-row class="item-row">
              <el-col class="name-col" :span="12"> 教员 </el-col>
              <el-col class="content-col" :span="12">
                {{ baseInfo.teacher }}
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row class="item-row">
              <el-col class="name-col" :span="12"> 课程 </el-col>
              <el-col class="content-col" :span="12">
                {{ baseInfo.course }}
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row class="item-row">
              <el-col class="name-col" :span="12"> 教学班 </el-col>
              <el-col class="content-col" :span="12">
                {{ baseInfo.classroom }}
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="single-row">
          <el-col :span="8">
            <el-row class="item-row">
              <el-col class="name-col" :span="12"> 年级 </el-col>
              <el-col class="content-col" :span="12">
                {{ baseInfo.grade }}
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row class="item-row">
              <el-col class="name-col" :span="12"> 参评人数 </el-col>
              <el-col class="content-col" :span="12">
                {{ baseInfo.evalNum }}
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row class="item-row">
              <el-col class="name-col" :span="12"> 评价得分 </el-col>
              <el-col class="content-col" :span="12">
                {{ baseInfo.score }}
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="single-row">
          <el-col :span="24">
            <div style="padding: 10px 20px">
              <el-row class="item-row2 item-row">
                <el-col class="name-col" :span="24">评教结果</el-col>
              </el-row>
              <el-table
                :data="tableData"
                :span-method="arraySpanMethod"
                border
                style="width: 100%"
                class="table-data"
                row-class-name="row-class"
                cell-class-name="cell-class"
                header-row-class-name="header-row-class"
                header-cell-class-name="header-cell-class"
              >
                <el-table-column
                  prop="courseType"
                  label="课程分类"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="className"
                  label="专业班次"
                  align="center"
                >
                </el-table-column>
                <el-table-column prop="ranking" label="排名" align="center">
                </el-table-column>
                <el-table-column
                  prop="courseNum"
                  label="课程总数"
                  align="center"
                >
                </el-table-column>
              </el-table>
              <el-table
                :data="tableData2"
                border
                style="width: 100%; margin-top: 50px"
                class="table-data"
                row-class-name="row-class"
                cell-class-name="cell-class"
                header-row-class-name="header-row-class"
                header-cell-class-name="header-cell-class"
              >
                <el-table-column prop="title" label="分数段" align="center">
                  <template slot-scope="scoop">
                    <div class="name-col" style="background: none !important">
                      {{ scoop.row.title }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="s95" label="100-95分" align="center">
                </el-table-column>
                <el-table-column prop="s90" label="94-90分" align="center">
                </el-table-column>
                <el-table-column prop="s85" label="89-85分" align="center">
                </el-table-column>
                <el-table-column prop="s80" label="84-80分" align="center">
                </el-table-column>
                <el-table-column prop="s75" label="79-75分" align="center">
                </el-table-column>
                <el-table-column prop="s70" label="74-70分" align="center">
                </el-table-column>
                <el-table-column prop="s69" label="69分以下" align="center">
                </el-table-column>
              </el-table>
              <el-row class="item-row2 item-row">
                <el-col class="name-col" :span="24">学员评价结果</el-col>
              </el-row>
              <el-table
                :data="tableData3"
                border
                style="width: 100%"
                class="table-data"
                row-class-name="row-class"
                cell-class-name="cell-class"
                header-row-class-name="header-row-class"
                header-cell-class-name="header-cell-class"
              >
                <el-table-column width="1200" prop="evalItem" label="评价分项">
                  <template slot="header" slot-scope="scope">
                    <div style="text-align: center">评价分项</div>
                  </template>
                  <template slot-scope="scope">
                    <div
                      :class="[scope.row.suggFlag ? 'name-col' : '']"
                      style="padding-left: 100px; background: none !important"
                      :style="{
                        height: scope.row.suggFlag ? '300px' : '',
                        'padding-top': scope.row.suggFlag ? '20px' : '',
                      }"
                    >
                      {{ scope.row.evalItem }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="evalResult"
                  label="评价结果"
                  align="center"
                >
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div
        class="search-container"
        style="display: flex; justify-content: center !important"
      >
        <ButtonItem
          :name="'保存'"
          :link="''"
          :icon="''"
          :buttonColor="'yellow'"
        ></ButtonItem>
      </div>
    </div>
  </div>
</template>

<script>
import SelectItem from "../../../components/SelectItem.vue";
import InputItem from "../../../components/InputItem.vue";
import ButtonItem from "../../../components/ButtonItem.vue";
import Subscript from "../../../components/Subscript.vue";
export default {
  components: {
    SelectItem,
    InputItem,
    ButtonItem,
    Subscript,
  },
  data() {
    return {
      baseInfo: {
        xq: "2020春",
        system: "系1",
        room1: "教研室1",
        teacher: "李教员",
        course: "英语",
        classroom: "教学班1",
        grade: "三年级",
        evalNum: "23人",
        score: "98",
      },
      tableData: [
        {
          courseType: "通识课",
          className: "1班",
          ranking: "9",
          courseNum: "20",
        },
        {
          courseType: "通识课",
          className: "1班",
          ranking: "9",
          courseNum: "20",
        },
      ],
      tableData2: [
        {
          title: "人数",
          s95: "20",
          s90: "20",
          s85: "20",
          s80: "20",
          s75: "20",
          s70: "20",
          s69: "20",
        },
        {
          title: "比例",
          s95: "30",
          s90: "30",
          s85: "30",
          s80: "30",
          s75: "30",
          s70: "30",
          s69: "30",
        },
      ],
      tableData3: [
        {
          evalItem: "注重基本技能训练和实践能力培养",
          evalResult: "80",
        },
        {
          evalItem: "思路清晰，内容丰富",
          evalResult: "80",
        },
        {
          evalItem: "建议:",
          evalResult: "",
          suggFlag: true,
        },
      ],
      multipleSelection: [],
    };
  },
  computed: {
    config() {
      return {
        mergeTarget: "id", // 通用依据
        combineProp: [
          // combineProp - 根据mergeTarge 进行合并的单元格属性
          "courseType",
        ],
      };
    },
  },
  methods: {
    arraySpanMethod({ row, column }) {
      const span = column["property"] + "-span";
      if (row[span]) {
        return row[span];
      }
    },
    choiceLink(index) {
      this.record = index;
    },
    checkboxChange(e) {
      console.log(e);
    },

    isEmpty(val) {
      return typeof val == "undefined" || val === null || val == "-";
    },
    isObject(val) {
      return Object.prototype.toString.call(val) === "[object Object]";
    },
    mergeRow() {
      let arr = [].concat(this.tableData);
      // arr.splice(index, 0, Object.assign({}, row))

      this.tableData = this.mergeData(arr);
    },
    mergeData(list) {
      // mergeTarge - 合并项依据
      // combineProp - 根据mergeTarge 进行合并的单元格属性
      return this.filterData(this.config, [].concat(list));
    },
    filterData(config, tableData, targetProp) {
      const { mergeTarget, combineProp } = config;
      // 叠加的合并条件
      combineProp.forEach((column) => {
        // 记录合并项
        let combineCount = 1;
        if (this.isObject(column)) {
          return this.filterData.call(this, column, tableData, mergeTarget);
        }
        // 使用倒序遍历
        for (let i = tableData.length - 1; i >= 0; i--) {
          let curr = tableData[i],
            prev = tableData[i - 1];

          if (this.isEmpty(prev)) {
            // 已经循环完毕
            curr[`${column}-span`] = {
              rowspan: combineCount,
              colspan: combineCount >= 1 ? 1 : 0,
            };
            break;
          }

          if (
            prev[targetProp] === curr[targetProp] &&
            prev[mergeTarget] === curr[mergeTarget] &&
            prev[`${column}`] === curr[`${column}`]
          ) {
            ++combineCount;
            curr[`${column}-span`] = {
              rowspan: 0,
              colspan: 0,
            };
          } else {
            curr[`${column}-span`] = {
              rowspan: combineCount,
              colspan: combineCount >= 1 ? 1 : 0,
            };
            prev[`${column}-span`] = {
              rowspan: 1,
              colspan: 1,
            };
            // 前后项不相符时，对combinecount进行重置
            combineCount = 1;
          }
        }
      });
      return tableData;
    },
  },
  created() {
    this.mergeRow();
  },
};
</script>
<style lang="less" scoped>
.search-container {
  justify-content: flex-start !important;
}

.search-button {
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 27px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;

  > span {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #51aef6;
  }

  > img {
    width: 19px;
    height: 19px;
    margin-right: 4px;
  }
}

.table-container {
  padding-bottom: 30px;
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .wrapper-button {
    display: flex;
    flex-direction: column;
    align-items: center;

    > div {
      margin-bottom: 8px;
    }
  }
}
</style>

<style lang="less" scoped>
.item-row .el-col {
  display: flex;
  align-items: center;
  min-height: 60px;
  border-right: none !important;
}
.item-row .el-col:not(:first-child) {
  border-left: 1px solid rgba(0, 76, 167, 0.39);
}
.single-row .el-col:not(:last-child) {
  border-right: 1px solid rgba(0, 76, 167, 0.39);
}
.my-form .single-row:not(:last-child) {
  border-bottom: 1px solid rgba(0, 76, 167, 0.39);
}
.name-col {
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  color: #004ca7;
  background: rgba(77, 129, 192, 0.1);
}
.content-col {
  padding-left: 10%;
  color: #004ca7;
}
.wrapper-container {
  .my-form {
    width: 100%;
    border: 1px solid rgba(0, 76, 167, 0.8);
    margin: 57px auto 19px;
    border-radius: 9px;
  }
}
@import "../../../styles/special.less";

.item-row2 .name-col {
  background: none !important;
}
.content-col {
  padding-left: 10%;
}
.filter-button::v-deep .el-radio-button .el-radio-button__inner {
  border-radius: 6px !important;
  border: 1px solid #02c86c;
  color: #02c86c;
  background-color: #dfffef;
}
.filter-button::v-deep
  .el-radio-button__orig-radio:checked
  + .el-radio-button__inner {
  border: 1px solid #02c86c;
  color: white;
  background-color: #02c86c;
}
.bottom-block {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  .text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 39px;
    color: #004ca7;
  }
}
.table-container ::v-deep .el-table--border .el-table__cell:first-child .cell {
  padding-left: 10px !important;
}
.filter-button1::v-deep .el-radio-button .el-radio-button__inner {
  border-radius: 6px !important;
  border: 1px solid rgb(245, 134, 106);
  color: rgb(245, 134, 106);
  background-color: rgb(254, 237, 226);
}
.filter-button1::v-deep
  .el-radio-button__orig-radio:checked
  + .el-radio-button__inner {
  border: 1px solid rgb(245, 134, 106);
  color: white;
  background-color: rgb(245, 134, 106);
}
.filter-button {
  display: flex;
  margin-top: 27px;
}
.wrapper-container {
  width: 1711px;
  margin: 0 auto;
}
.table-container {
  margin-top: 30px;

  .table-data {
    width: 100%;
    border: 0.8px solid #c7d7eb;
    // border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}
.save-button {
  width: 87px;
  height: 36px;
  line-height: 36px;
  background: #fff6ef;
  border: 1px solid #f3b815;
  border-radius: 6px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #f3b815;
  text-align: center;
  margin: 82px auto;
}

.zuoyou {
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
